<template>
    <view class="daub-upload">
        <view v-if="!daubImage" class="work-btn-style daub-upload-btn" @click="selectedFileData">上传空间图片</view>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue';

// 需要涂抹的图片
const daubImage = ref('');

//上传图片
const selectedFileData = () => {
    // 判断是否已获得相册授权
    // #ifdef MP-WEIXIN
    uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success() {
            uni.chooseMedia({
                count: 1, // 默认9
                mediaType: ['image'],
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    let tempFileImg = ''
                    
                    tempFileImg = res.tempFiles[0].tempFilePath
                    daubImage.value = tempFileImg
                },
                fail: function (err) {
                    uni.showToast({
                        title: "图片上传失败",
                        icon: "none",
                    })
                }
            })
        },
        fail() {
            // 未获得授权，提示用户前往设置页面授权
            uni.showModal({
                title: '提示',
                content: '您未授权访问相册，请前往设置页面授权',
                showCancel: false,
                success: function (res) {
                    if (res.confirm) {
                        // 跳转到应用设置页面
                        uni.openSetting({
                            success: function (res) {
                                if (res.authSetting['scope.writePhotosAlbum']) {
                                    // 用户已开启授权，可以再次尝试选择图片
                                    uni.chooseMedia({
                                        count: 1,
                                        sourceType: ['album', 'camera'],
                                        success: function (res) {
                                            let tempFileImg = ''
                                            // #ifdef H5
                                            tempFileImg = res.tempFilePaths[0]
                                            daubImage.value = tempFileImg
                                            // #endif

                                            // #ifndef H5
                                            tempFileImg = res.tempFiles[0].tempFilePath
                                            daubImage.value = tempFileImg
                                            // #endif
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            });
        }
    });
    // #endif


    // #ifdef H5
    uni.chooseImage({
        count: 1, // 默认9
        sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            let tempFileImg = ''
            tempFileImg = res.tempFilePaths[0]
            daubImage.value = tempFileImg

            console.log(daubImage.value);
        },
        fail: function (err) {
            uni.showToast({
                title: "图片上传失败",
                icon: "none",
            })
        }
    })
    // #endif

}
</script>

<style lang="scss" scoped>
.daub-upload {
    width: 686rpx;
    height: 514rpx;
    border: 2rpx dashed #333333;
    margin: 64rpx auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .daub-upload-btn {
        width: 320rpx;
        height: 96rpx;
        border-radius: 48rpx;
        font-size: 30rpx;
        color: #000;
    }
}
</style>
